<template>
  <div id="YzhouEcharts" :style="{ height: echarstHeigth }"></div>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import * as echarts from 'echarts'
  import { getHuanDuanYuCeGanTeTu } from '@/api/shengChanJianShi'

  const props = defineProps({
    radioValue: {
      type: Number,
      default: 0
    }
  })

  const echarstHeigth = ref('')
  const myChart = ref()
  const dataSeries = ref<any>([])
  const yZhouArr = ref<any>([])

  const getChartData = () => {
    getHuanDuanYuCeGanTeTu(props.radioValue).then((res: any) => {
      dataSeries.value = []
      yZhouArr.value = []
      dataSeries.value = res.statistics.map((item) => {
        yZhouArr.value.push('机台' + item.machineName)
        return {
          type: 'custom',
          name: '机台' + item.machineName,
          label: {
            show: true
          },
          encode: {
            x: [1, 2],
            label: [0]
          },
          data: item.detail.map((val2) => {
            return {
              name: '',
              value: [
                '',
                dayjs(val2.start).format('YYYY/MM/DD HH:mm'),
                dayjs(val2.end).format('YYYY/MM/DD HH:mm')
              ],
              itemStyle: {
                normal: {
                  color: val2.state == 1 ? '#5bbf21' : '#ea1a21'
                }
              },
              tooltip: {
                show: true,
                backgroundColor: '#fff',
                borderColor: '#ddd',
                borderWidth: 1,
                textStyle: {
                  color: '#656664',
                  fontSize: 14
                },
                formatter: function (p) {
                  return p.seriesName + '<br>' + p.marker + p.value[1] + '~' + p.value[2]
                },
                extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
              },
              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }),
          renderItem: (params, api) => {
            const start = api.coord([api.value(1), params.seriesName])
            const end = api.coord([api.value(2), params.seriesName])
            const height = api.size([1, 1])[1] * 0.7
            const width = end[0] - start[0]

            let rectShape = echarts.graphic.clipRectByRect(
              {
                x: start[0],
                y: start[1] - height / 2,
                width: width,
                height: height
              },
              {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
              }
            )

            return (
              rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
              }
            )
          }
        }
      })
      handleSetVisitChart()
    })
  }

  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById('YzhouEcharts'))
    // myChart.value.on('click', function (params) {
    //   _this.$emit('zhuZhuangTuClick', params)
    // })
    let option = {
      tooltip: {},
      grid: {
        show: false,
        borderWidth: 0,
        top: 10,
        right: 50,
        left: 110,
        bottom: 70,
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        top: '2%',
        right: '0%',
        textStyle: {
          color: '#90979c'
        },
        // "data": ['运行', '停车', '故障维修', '报警查看']
        data: [
          {
            name: '运行',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
              color: 'red'
            }
          },
          {
            name: '停车',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
              color: 'blue'
            }
          }
        ]
      },
      // "calculable": true,
      xAxis: {
        type: 'time',
        interval: 24 * 60 * 60 * 1000,
        minInterval: 1,
        splitLine: {
          lineStyle: {
            // type:'dashed',
            width: 1,
            color: ['#242424'] // 分割线的颜色
          }
        },
        axisLabel: {
          formatter: function (value) {
            // 坐标轴文字展示样式处理
            const date = new Date(value)
            // const texts = [date.getFullYear(), (date.getMonth() + 1), date.getDate()]
            const texts = [date.getMonth() + 1, date.getDate()]
            return texts.join('-')
            // echarts自带的日期格式化方法
            // return echarts.format.formatTime('MM-dd', value)
          },
          rotate: 30,
          textStyle: {
            fontSize: 12,
            fontFamily: 'PingFang SC',
            fontWeight: 400,
            lineHeight: 17,
            color: '#646464', // 坐标值的具体的颜色
            opacity: 1
          }
        }
      },
      yAxis: {
        type: 'category',
        splitLine: {
          show: false
        },
        data: yZhouArr.value
      },
      series: dataSeries.value,
      dataZoom: [
        {
          show: true,
          left: 15,
          yAxisIndex: [0],
          start: 0,
          // end: _this.computedPosition(_this.yZhouArr.length),
          handleSize: '110%',
          handleStyle: {
            color: '#464849'
          },
          textStyle: {
            color: '#3b3a3a'
          },
          borderColor: '#90979c',
          rangeMode: ['17日', '100']
          // zoomLock: true
        },
        {
          show: true,
          type: 'slider',
          labelFormatter: function (value) {
            // 在这里写你需要的时间格式
            value = dayjs(value).format('YYYY-MM-DD HH:mm')
            return value
          },
          xAxisIndex: [0],
          filterMode: 'weakFilter',
          backgroundColor: '#fafafa',
          minValueSpan: 60
        }
      ]
    }

    myChart.value.clear()
    myChart.value.setOption(option, true)
    window.addEventListener('resize', function () {
      myChart.value.resize()
    })
  }

  watch(
    () => props.radioValue,
    () => {
      getChartData()
    },
    {
      immediate: true
    }
  )

  onMounted(() => {
    // getChartData()
    nextTick(() => {
      echarstHeigth.value = document.documentElement.clientHeight - 255 + 'px'
    })
    window.addEventListener('resize', () => {
      nextTick(() => {
        echarstHeigth.value = document.documentElement.clientHeight - 255 + 'px'
      })
    })
  })
</script>
